<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-17 14:27:59
 * @LastEditTime: 2021-06-22 20:06:04
 * @Description: 流变抄录
-->
<template>
    <div id="liubian_page" class="copyPage">
        <!-- 顶部导航 -->
        <van-nav-bar title="流变抄录" left-arrow @click-left="back" >
            <van-icon class="rotate-icon" name="ellipsis" slot="right" size="20" @click="showMore=true"/>
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 更多按钮弹窗 -->
        <div class="popupPage" v-if="showMore">
            <div class="mask" @click="showMore=false">
                <div class="popup">
                    <van-cell v-for="(item,i) of moreButtons" :key="i" :value="item.name" />
                </div>
            </div>
        </div>
        <!-- 折叠面板 -->
        <van-collapse v-model="activeNames">
            <van-collapse-item title="1号主变101A流变" name="1">
                <div slot="title" style="display: flex;">
                    <span class="line_green"></span>
                    <span>流变</span>
                </div>
                <div>
                    <div class="line-title font16">1号主变101A流变A相</div>
                    <div class="line-title font14">SF6气体压力</div>
                    <div>
                        <div class="line">
                            <van-field v-model="text" label="查看历史" input-align="right" placeholder="请输入">
                                <div slot="label">
                                    <span @click="show=!show">查看历史</span>
                                </div>
                            </van-field>
                        </div>
                        <div class="wrapper" v-show='show'>
                            <div class="block">
                                <div class="historyItem">
                                    <div>2月14日</div>
                                    <div>3</div>
                                </div>
                                <div class="historyItem">
                                    <div>2月15日</div>
                                    <div>3</div>
                                </div>
                                <div class="historyItem">
                                    <div>2月16日</div>
                                    <div>3</div>
                                </div>
                            </div>
                        </div>
                    </div>
                  
                   
                </div>
                <div class="xiangbieItem">
                    <div class="line-title font14">SF6气体压力</div>
                    <div class="line">
                        <van-field v-model="text" label="查看历史" input-align="right" placeholder="请输入">
                            <div slot="label">
                                <span @click="show=!show">查看历史</span>
                            </div>
                        </van-field>
                    </div>
                </div>
            </van-collapse-item>
            <van-collapse-item title="1号主变101B流变" name="2">内容</van-collapse-item>
            <van-collapse-item title="1号主变" name="3">内容</van-collapse-item>
        </van-collapse>
        <!-- 底部按钮区域 -->
        <div class="footPart">
            <van-button size="small" @click="back">取消</van-button>
            <van-button class="sureBtn" size="small" @click="sumbit">提交</van-button>
        </div>
        <!-- 查看历史数据弹窗 -->
        <!-- <van-overlay :show="show" @click="show = false">
            <div class="wrapper">
                <div class="block">
                    <div class="historyItem">
                        <div>2月14日</div>
                        <div>3</div>
                    </div>
                    <div class="historyItem">
                        <div>2月15日</div>
                        <div>3</div>
                    </div>
                    <div class="historyItem">
                        <div>2月16日</div>
                        <div>3</div>
                    </div>
                </div>
            </div>
        </van-overlay> -->
    </div>
</template>
<script type="text/javascript">
import {submitCopyData} from '../../api/dataCopy';
export default {
    name: "liubianCopy",
    components: {
       
    },
    data() {
        return {
            // 是否显示历史数据弹窗
            show:false,
            text:"",
            // 激活的折叠面板选项
            activeNames: ['1'],
            //是否展示更多按钮
            showMore:false,
            // 抄录类型
            moreButtons:[
                {name:"同步数据"},
                {name:"间隔目录"},
                {name:"二维码"},
                {name:"RFID"},
            ],
            // 提交的数据
            submitCopyData:[],
        }
    },
    created(){
        

    },
    mounted() {
     
    },
    methods: {
        /**
         * @description: 返回
         */
        back(){
            this.$router.push({
                name:"copyMenu"
            })
        },

        /**
         * @description: 提交
         */
        sumbit(){
            console.log("提交1111111111")
        },

        /**
         * @description: 显示历史数据弹窗
         */
        showHistory(){
            console.log("查看历史记录")
            this.show = true
        },
         /**
        * @description: 保存压变数据
        */
        commitBtn() {
            var self = this;
            // 提交的数据
            var params = this.submitCopyData;
            params.requireFinishTime = this.currentDate;
            this.$Toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "抄录数据提交中...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                submitCopyData(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    self.$router.push({name:"copyMenu",params:{}})
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.fail(err)
            })
        },
    },
    watch:{
        taskList(){
            
        }
    },
    filters: {
        
    }
}
</script>
<style scoped>
#liubian_page {
    width: 100%;
    height: 100%;   
    padding-bottom: 0;
    background: #fff;
}
.van-nav-bar {
    background: #17b49b;
}
.van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 22px;
}
.van-nav-bar /deep/ .van-nav-bar__text {
    color: #fff;
    font-size: 18px;
}
.van-nav-bar /deep/ .van-button {
    background: #fff;
    color: #17b49b;
    width: 60px;
    border-radius: 4px;
    margin-right: 10px;
}
.popup {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 150px;
    height: 84px;
}
.popup .van-cell {
    background: #17b49b;
}
.popup .van-cell__value--alone {
    color: #fff;
}
/* 更多弹窗按钮样式 */
.popupPage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 100%;
    text-align: left;
}
.mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
}
/* 折叠面板区域 */
.xiangbieItem {
    margin-top: 20px;
}
.line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.van-collapse /deep/ .van-button--plain.van-button--info {
    color: #17b49b;
}
.van-button--info {
    border: 1px solid #17b49b;
}
/* 查看历史弹窗 */
/* 查看历史弹窗 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #F5F6FA !important;
}

.block {
    width: 100%;
    height: 120px;
    padding: 20px;
    border-radius: 5px;
}

.historyItem {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ECECEC;
}
/* 底部按钮区域 */
.footPart {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #efefef;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footPart .van-button {
    width: 100px;
    margin: 0 10px;
    border-radius: 5px;
}
.sureBtn {
    background: #17b49b;
    color: #fff;
}
</style>